import { Component } from 'react'
import { Modal, Form, Input ,Select} from 'antd'

const FormItem = Form.Item
const Option = Select.Option
class UserEditModal extends Component {

  constructor (props) {
    super(props)
    this.state = {
      visible: false,
    }
  }

  showModelHandler = (e) => {
    if (e) e.stopPropagation()
    this.setState({
      visible: true,
    })
  }

  hideModelHandler = () => {
    this.setState({
      visible: false,
    })
  }

  okHandler = () => {
    const { onOk ,record } = this.props
    const { key } = record
    this.props.form.validateFields((err, values) => {
      if (!err) {
        onOk({key,values})
        this.hideModelHandler()
      }
    })
  }

  render (){
    const { children } = this.props
    const { getFieldDecorator } = this.props.form
    const { name, text, age,address } = this.props.record
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    }

    return (
      <span>
        <span onClick={this.showModelHandler}>
          { children }
        </span>
        <Modal
          title="Edit User"
          visible={this.state.visible}
          onOk={this.okHandler}
          onCancel={this.hideModelHandler}
        >
          <Form horizontal onSubmit={this.okHandler}>
            <FormItem
              {...formItemLayout}
              label="姓名"
            >
              {
                getFieldDecorator('name', {
                  initialValue: name,
                })(<Input />)
              }
            </FormItem>
            <FormItem
            {...formItemLayout}
            label="性别"
            >
            {getFieldDecorator('text', {
                initialValue: ( text === '1'? '男': text === '2'? '女': '' ),
            })(
              <Select onChange={this.handleSex}>
                <Option value="1">男</Option>
                <Option value="2">女</Option>
              </Select>
            )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="年龄"
            >
              {
                getFieldDecorator('age', {
                  initialValue: age,
                })(<Input />)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="地址"
            >
              {
                getFieldDecorator('address', {
                  initialValue: address,
                })(<Input />)
              }
            </FormItem>
          </Form>
        </Modal>
      </span>
    )
  }
}

export default Form.create()(UserEditModal)
